<template>
  <div class="information-panel">
    <h2 class="title" :class="!showInformation ? 'hide' : ''" @click="changeShow">
      <span>{{$t('webchat.chatCustomFields')}}</span>
      <i class="icon el-icon-arrow-down" v-show="!showInformation"></i>
      <i class="icon el-icon-arrow-up" v-show="showInformation"></i>
    </h2>
    <div class="information" v-show="showInformation">
      <div class="information_first" v-show="firstDataInfo.length">
        <div class="information_title">{{$t('webchat.firstMessage')}}</div>
        <div class="chat_info_li clearBoth" v-for="item in firstDataInfo">
          <el-row>
            <el-col :span="10" class="box chat_info_li_title">
              <span class="ellipsis" :title="item.title">{{item.title}}:</span>
            </el-col>
            <el-col :span="12" class="box chat_info_li_con">
              <span v-if="!item.haveUrl" class="ellipsis" :title="item.value">{{item.value}}</span>
              <a v-if="item.haveUrl" class="ellipsis" :class="checkImg(item.value) ? 'haveImg' : ''" :href="item.value" target="_blank">{{item.value}}</a>
              <span class="tooltip tooltip-div iconfont icon-yulan bigImgBtn"
                    v-if="checkImg(item.value)"
                    @click.stop="showBigImage(item.value)"></span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="information_new" v-show="dataInfo.length">
        <div class="information_title">{{$t('webchat.latestNews')}}</div>
        <div class="chat_info_li clearBoth" v-for="item in dataInfo">
          <el-row>
            <el-col :span="10" class="box chat_info_li_title">
              <span class="ellipsis" :title="item.title">{{item.title}}:</span>
            </el-col>
            <el-col :span="12" class="box chat_info_li_con">
              <span v-if="!item.haveUrl" class="ellipsis" :title="item.value">{{item.value}}</span>
              <a v-if="item.haveUrl" class="ellipsis" :class="checkImg(item.value) ? 'haveImg' : ''" :href="item.value" target="_blank">{{item.value}}</a>
              <span class="tooltip tooltip-div iconfont icon-yulan bigImgBtn"
                    v-if="checkImg(item.value)"
                    @click.stop="showBigImage(item.value)"></span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {deepClone} from '@utils/m7Utils.js'
  import {checkform} from '@utils/validate'
  import * as webchatUtils from '@utils/webchat.js'
  import * as types from '@/store/mutation-types.js'
  export default {
    name: 'extraInfo',
    data () {
      return {
        showInformation: false
      }
    },
    props: {
      webchatData: Object,
      chatInfo: Object
    },
    computed: {
      dataInfo () {
        let arr = []
        if (this.chatInfo.otherParams && this.chatInfo.otherParams.customField) {
          let arrNew = deepClone(this.chatInfo.otherParams.customField)
          if (arrNew && typeof arrNew === 'object') {
            for (let a in arrNew) {
              let oldValue = arrNew[a]
              let newValue = webchatUtils.msgConvertion(arrNew[a])
              if (oldValue !== newValue) {
                let obj = {
                  title: a,
                  value: oldValue,
                  haveUrl: true
                }
                arr.push(obj)
              } else {
                arr.push({title: a, value: oldValue, haveUrl: false})
              }
            }
          }
          return arr
        } else {
          return arr
        }
      },
      firstDataInfo () {
        let arr = []
        if (this.chatInfo.firstOtherParams && this.chatInfo.firstOtherParams.customField) {
          let arrNew = deepClone(this.chatInfo.firstOtherParams.customField)
          if (arrNew && typeof arrNew === 'object') {
            for (let a in arrNew) {
              let oldValue = arrNew[a]
              let newValue = webchatUtils.msgConvertion(arrNew[a])
              if (oldValue !== newValue) {
                let obj = {
                  title: a,
                  value: oldValue,
                  haveUrl: true
                }
                arr.push(obj)
              } else {
                arr.push({title: a, value: oldValue, haveUrl: false})
              }
            }
          }
          return arr
        } else {
          return arr
        }
      }
    },
    methods: {
      checkImg (value) {
        if (typeof value !== 'string' || !value) {
          return false
        }
        value.replace(/\s/g, '')
        if (checkform(value, 'Img')) {
          return false
        } else {
          return true
        }
      },
      changeShow () {
        this.showInformation = !this.showInformation
        if (this.showInformation) {
          window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-扩展信息'])
        }
      },
      showBigImage (data) {
        let msg = {
          show: true,
          url: data
        }
        this.$store.commit(types.SET_OLD_BIGIMG, msg)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "./../../../../../assets/common.styl"
  .information-panel
    padding-top 20px
    padding-left 20px
    padding-right 20px
    .title
      font-size 14px
      font-weight 600
      color $cf-gray3
      cursor pointer
      .icon
        margin-left 5px
        font-size 11px
        color $cf-level4
    .hide
      padding-bottom 20px
      border-bottom solid 1px #d9d9d9
  .information
    padding-top 8px
    padding-bottom: 20px;
    border-bottom: solid 1px #d9d9d9;
    .chat_info_li
      color $cf-gray3
      padding 0 10px 0 0
    .chat_info_li_con
      text-align right
      margin-left 7%
    .ellipsis
      overflow hidden
      max-width 100%
      display inline-block
    .ellipsis.haveImg
      width calc(100% - 22px)
    .bigImgBtn
      cursor pointer
      margin-right 2px
      color $c-main
  .information_title
    color #595959
    font-size 12px
    font-weight bold
</style>
